<template>
  <div >
    <div class="max">
    <div>
      <mt-header :title="goods">
        <div @click="back" slot="left">
          <mt-button icon="back"></mt-button>
        </div>
        <div slot="right" @click="goCc">
        <mt-button icon="more" ></mt-button>
        </div>
      </mt-header>
    </div>
    <div class="content">
      <div class="content-left" >
        <div ref="colorPrice">{{now}}</div>
        <div >{{(now/open).toFixed(2)}}%</div>

      </div>
      <div class="content-center">
        <div>高</div>
        <div>低</div>
        <div>24H量</div>
      </div>
      <div class="content-right">
        <div>{{highest}}</div>
        <div>{{lowest}}</div>
        <div>{{Number(counts).toFixed(2)}}</div>
      </div>
    </div>
    <div class="title" style="background: #131E31">
      <van-tabs @click="tabClick">
        <van-tab name="1" title="1">
          <div slot="title">1分钟</div>
        </van-tab>
        <van-tab name="5" title="5">
          <div slot="title">5分钟</div>
        </van-tab>
        <van-tab name="15" title="15">
          <div slot="title">15分钟</div>
        </van-tab>
        <van-tab name="30" title="30">
          <div slot="title">30分钟</div>
        </van-tab>
        <van-tab name="60" title="60">
          <div slot="title">60分钟</div>
        </van-tab>
        <van-tab name="240" title="240">
          <div slot="title">4小时</div>
        </van-tab>
        <div class="kine">
        <span class="enlarge">
          <img @click="zoomClick" src='../../assets/s.png'>
        </span>
          <div id="echart"  style="width:100%;height:420px"></div>
        </div>
      </van-tabs>

    </div>
    <div class="trading">
      <div class="trading-left" @click="showModal=true">
        <div class="trading-number">
          <div>数量</div>
          <div>{{order_price}}</div>
        </div>
        <div class="trading-number">
          <div>时间</div>
          <div>{{order_sen}}s</div>
        </div>
        <div class="trading-number">
          <div>盈利率</div>
          <div>{{order_shouyi}}%</div>
        </div>
        <div class="trading-img"><img src="../../assets/icon/arrow.jpg" alt=""></div>
      </div>
      <div class="trading-right">
        <div @click="chose(0)"><p>買張</p></div>
        <div @click="chose(1)"><p>買跌</p></div>
      </div>
    </div>
    <div>
      <div class="mask" v-if="showModal" @click="showModal=false"></div>
      <div class="mask" v-show="showModals" @click="showModals=false"></div>
      <div class="pop" v-if="showModal">
        <div class="RadioStyle">
          <div class="box">數量</div>
          <div class="Block PaddingL">
            <input value="500" type="radio" v-model="order_price" id="model1"/>
            <label for="model1">&nbsp;500&nbsp;&nbsp;</label>
            <input value="1000" type="radio" v-model="order_price" id="model2"/>
            <label for="model2">1000&nbsp;&nbsp;</label>
            <input value="2000" type="radio" v-model="order_price" id="model3"/>
            <label for="model3">2000&nbsp;&nbsp;</label>
            <input value="3000" type="radio" v-model="order_price" id="model4"/>
            <label for="model4">3000&nbsp;</label>
          </div>
          <div class="Block PaddingL">
            <input value="5000" type="radio" v-model="order_price" id="model5"/>
            <label  for="model5">5000&nbsp;</label>
            <input value="10000" type="radio" v-model="order_price" id="model6"/>
            <label  for="model6">10000</label>
            <input value="20000" type="radio" v-model="order_price" id="model7"/>
            <label for="model7">20000</label>
          </div>

          <div class="box">時間</div>
          <div class="Block PaddingL">
            <input value="60" type="radio" v-model="order_sen" id="1"/>
            <label for="1">&nbsp;60s&nbsp;&nbsp;</label>
            <input value="180"  type="radio" v-model="order_sen" id="2"/>
            <label for="2">&nbsp;180s&nbsp;</label>
            <input value="300" type="radio" v-model="order_sen" id="3"/>
            <label for="3">&nbsp;300s&nbsp;</label>
          </div>
          <div class="box3">盈利率: <span style="color: #4caf50">{{order_shouyi}}%</span></div>

        </div>
        <div class="trading-bottom">
          <div @click="chose(0)"><p>買張</p></div>
          <div @click="chose(1)"><p>買跌</p></div>
        </div>
      </div>

      <div class="down" ref="down" v-show="showModals">

         <div class="downTop" ref="downTop">
           <p>买<span ref="uord">up</span></p>
         </div>
        <div class="smallBox">
        <div style="height: 30px;margin-top: 20px;">
          <span>数量  :</span>
          <span>{{goods}}</span>
        </div>
        <div style="height: 30px">
          <span>Time  :</span>
          <span>{{this.order_sen}}S</span>
        </div>
        <div style="height: 30px">
          <span>盈利率  :</span>
          <span>{{order_shouyi}}%</span>
        </div>
        <div  class="cz">
          <button class="qx" @click="closeDetail(1)">取消</button>
          <button class="mz"  v-if="xdType==0"  @click="buySell(0)">买涨</button>
          <button class="md"  v-if="xdType==1"  @click="buySell(1)">买跌</button>
        </div>
        </div>
      </div>
      <div class="djs" v-show="IsShow">
        <div class="djsTop">
          <p style="line-height: 40px;">{{goods}}</p>
          <p @click="closeDetail(2)" style="font-size: 30px;line-height: 30px;position: absolute;top: 0;right: 15px">×</p>
        </div>
        <div class="quire" v-show="isTime">
         {{count}}S
        </div>
        <div class="ploss" v-show="!isTime" >
           <div ref="ploss">+100USD</div>
        </div>
        <div class="info">
           <div class="fx">
             <p>方向</p>
             <p v-if="xdType==0">买涨</p>
             <p v-else>买跌</p>
           </div>
          <div class="fx">
            <p>金额</p>
            <p ref="amout">{{this.order_price}}USD</p>
          </div>
          <div class="fx">
            <p>执行价</p>
            <p ref="nowPrice">100</p>
          </div>
          <div class="fx">
            <p>预测结果</p>
            <p>{{order_price*order_shouyi}}USD</p>
          </div>
        </div>
        <div class="goXd" @click="again">
          <button class="goXdBt">继续下单</button>
        </div>
      </div>
    </div>
  </div>
  </div>
</template>
<style scoped>
  .djs{
    font-size: 15px;
    color: #FFFFFF;
    position: fixed;
    left: 15px;
    bottom: 100px;
    width:90%;
    height: 330px;
    background: #00a4ff;
    display: flex;
    flex-direction: column;
    align-items: center;
    border-radius: 5px;
  }
  .djsTop{
    position: relative;
    left: 0;
    top: 0;
    width: 100%;
    height: 50px;
    display: flex;
    flex-direction: row;
   justify-content: center;
    border-bottom: 1px solid #FFFFFF;
  }
  .quire{
    margin: 20px 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: 100px;
    height: 100px;
    border-radius:150px;
    font-size: 30px;
    color: #00a4ff;
    align-items: center;
    background: #FFFFFF;
  }
  .ploss{
    margin: 20px 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: 100px;
    height: 100px;
    color: red;
    align-items: center;
    font-size: 30px;
  }
  .info{
    display: flex;
    flex-direction: row;
    width: 100%;
    height: 80px;
    align-items: center;
    justify-content: center;
  }
  .fx{
    width: 75px;
    height: 80px;
  }
  .goXd{
    width: 80%;
    height: 40px;
    font-size: 15px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }
  .goXdBt{
    color: #00a4ff;
    width: 100%;
    height: 100%;
    background: white;
    border-radius: 5px;
    border: 1px solid #00a4ff;
  }


</style>
<script>
  // 引入基本模板
  import Vue from 'vue';
  import echarts from "echarts";
  import axios from "axios";
  import {Header} from 'mint-ui';
  import {MessageBox} from 'mint-ui';
  import {addOrder} from "../../api/addOrder";
  import {orderInfo} from "../../api/orderInfo";
  import { Indicator } from 'mint-ui';
  Vue.component(Header.name, Header);
  // 引入柱状图组件
  //require('echarts/lib/chart/line')
  //require('echarts/lib/chart/bar')

  // 引入提示框和title组件
  //require('echarts/lib/component/tooltip')
  //require('echarts/lib/component/title')

  export default {
    name: "eCharts",
    data() {
      return {
        // 成交量
        counts:'',
        // 是否展示倒计时
        IsShow:false,
        // 百分比
        bfb:0.2,
        xdType:0 ,
        isTime:true,
        order_price:500,
        timers:null,
        timer: null, // 定时器
        order_sen:60,
        order_shouyi:95,
        newprice:175.1,
        showModal: false,
        showModals: false,
        count:'',
        showModalss: false,
        goods: 'BTC',
        close: '--',
        now: '--',
        pid:'',
        highest: '--',
        lowest: '--',
        open: '',
        axios: {},
        myeChart: {},
        userInfo:{},
        dataZoom: {
          direction: 1, //0 缩小， 1放大
          start: 50,
          end: 100,
          startValue: 0,
          endValue: 1
        },
        dataObj:{}
      };
    },
    mounted() {
      Indicator.open({
        text: '加載中...',
        //文字
        spinnerType: 'fading-circle',

        //样式
      });
      this.userInfo=JSON.parse(window.localStorage.getItem('userInfo'));
      this.pid = this.$route.query.pid;
      if (this.pid == 6) {
        this.goods = 'USDT';
      } else if (this.pid == 12) {
        this.goods = 'BTC';
      } else if (this.pid == 17) {
        this.goods = 'ETH';
      }

      let indexTimer=this.$route.query.indexTimer;
      clearInterval(indexTimer);

      this.axios = axios.create({
        //baseURL: process.env.BASE_URL,

        timeout: 12e5
      });

      this.axios.interceptors.response.use(
        response => {
          //console.log("aaa", response);
          return response.data;
        },
        error => {
          return Promise.reject(error);
        }
      );
      this.myeChart = echarts.init(document.getElementById("echart"));
      var that = this;
      this.myeChart.on('datazoom', function (params) {

        //console.log(params);

        var startValue = that.myeChart.getModel().option.dataZoom[0].startValue;
        var endValue = that.myeChart.getModel().option.dataZoom[0].endValue;
        //获得起止位置百分比
        var start = that.myeChart.getModel().option.dataZoom[0].start;
        var end = that.myeChart.getModel().option.dataZoom[0].end;

        //console.log(start, end, startValue, endValue);

        that.dataZoom.start = start;
        that.dataZoom.end = end;
        that.dataZoom.startValue = startValue;
        that.dataZoom.endValue = endValue;


      });
      this.drawKline('1');
      this.timer=setInterval(() => {
        this.drawKline('1');
      }, 30000);
     setInterval(() => {
        this.getkdata();
      }, 1000);
    },

    beforeCreate() {		//在页面创建之前设置body的背景色
      document.querySelector('body').setAttribute('style', 'background:#131E31')
    },
    beforeDestroy() {		//在页面销毁之前移除body的属性，目的是设置的颜色只对当前页面有效
      document.querySelector('body').removeAttribute('style')
    },
    methods: {
      goCc(){
        this.$router.push({
          name: 'orderlist',
        })

      },
      back(){
        clearInterval(this.timer);
        this.$router.go(-1);//返回上一层
      },

      tabClick(name, title) {
        console.log(name, title);
        let minutes = parseInt(title);

        this.drawKline(minutes);
      },
      async drawKline(minutes) {

        //console.log(this.myeChart.getOption())
        this.dataObj = await this.getData(minutes);
        // this.myeChart.setOption(this.getOption(this.dataObj));
        this.myeChart.setOption(this.getOption(this.dataObj));
        //window.onresize = myChart.resize;
      },

      splitData(rawData) {
        var categoryData = [];

        var values = [];
        var volumns = [];
        for (var i = 0; i < rawData.length; i++) {
          categoryData.push(this.formatTime(rawData[i].splice(0, 1)[0], "h:m"));
          //volumns.push(rawData[i].splice(4, 1)[0]);
          volumns.push(rawData[i][4]);
          values.push(rawData[i]);
        }
        var ret = {
          categoryData: categoryData,
          values: values,
          volumns: volumns
        };
        //console.log(ret);
        return ret;
      },

      calculateMA(dayCount, data) {
        var result = [];
        for (var i = 0, len = data.values.length; i < len; i++) {
          if (i < dayCount) {
            result.push("-");
            continue;
          }
          var sum = 0;
          for (var j = 0; j < dayCount; j++) {
            sum += data.values[i - j][1];
          }
          result.push(sum / dayCount);
        }
        //console.log(dayCount)
        //console.log(data.values)
        //console.log(result)
        return result;

      },
      async getkdata(){
        let params = {
          pid: this.pid,
        };
        let res;
        res = await  this.axios.get('https://www.qldlt.com/index/api/getprodata', {params: params});
        let close = res.topdata.close;
         this.counts= res.topdata.count;
        let highest = this.height;
        let open = this.op;
        let lowest = this.low;


        let topdata =  this.formatTime(res.topdata.topdata, "h:m")
        let obj = this.dataObj
        if(obj.categoryData[obj.categoryData.length-1] != topdata){
          obj.values.push([Number(open),Number(close.replace(/[,]/g, '')),Number(lowest),Number(highest),1000])
          obj.categoryData.push(topdata)
          obj.volumns.push(10)
        }else{

          obj.values[obj.categoryData.length-1][1]=Number(close.replace(/[,]/g, ''))

        }
        this.dataObj =obj
        this.myeChart.setOption(this.getOption(this.dataObj));
        // this.getOption();
        this.now =Number(res.topdata.close.replace(/[,]/g, ''));
        this.highest = res.topdata.highest;
        this.open = Number(res.topdata.open.replace(/[,]/g, ''));
        this.lowest = res.topdata.lowest;
        this.amount = res.topdata.amount;
      },
      async getData(minutes) {
        let baseUrl = "https://www.qldlt.com/index/";
        let params = {
          pid: this.pid,
          num: 60,
          interval: minutes,
          isres: 1
        };
        let res;
        res = await this.axios.get('https://www.qldlt.com/index/api/getkdata', {params: params});   //最新
        Indicator.close();
        console.log(res)
        this.height=res.items[59][2];
        this.low=res.items[59][3];
        this.op=res.items[59][4];
        return this.splitData(res.items);
      },

      getOption() {
        let data0 = this.dataObj

        let upColor = "#4BAC92";
        let upBorderColor = "#4BAC92";
        let downColor = "#D04B63";
        let downBorderColor = "#D04B63";

        let option = {
          backgroundColor: '#131E31',// 背景色
          tooltip: {
            trigger: "axis",
            axisPointer: {
              type: "cross"
            },
            position: [10, 10],
            extraCssText: "opacity: 1;",
            backgroundColor: "#ffffff",

            formatter: function (params, ticket, callback) {
              //console.log("dsfffff", params);
              let html =
                "" +
                "<div>" +
                "<div style='font-size: 11px;'>" +
                '<span><span style="color: black;">开=</span><span style="color: red;">' +
                params[0].data[1] +
                "</span></span>" +
                '<span><span style="color: black;margin-left: 2px">高=</span><span style="color: red;">' +
                params[0].data[4] +
                "</span></span>" +
                "</div>" +
                "<div style='font-size: 11px;'>" +
                '<span><span style="color: black;">低=</span><span style="color: red;">' +
                params[0].data[3] +
                "</span></span>" +
                '<span><span style="color: black;margin-left: 2px">收=</span><span style="color: red;">' +
                params[0].data[2] +
                "</span></span>" +
                "</div>" +
                "</div>";
              //let res = `<div><div>${params[0].data.description}：${params[0].value} </div><div>日期：${params[0].data.day}</div></div>`;
              return html;
            }
          },

          axisPointer: {
            link: {xAxisIndex: 'all'},
            label: {
              backgroundColor: '#D04B63'
            }
          },

          grid: [
            {
              left: "0",
              right: "14%",
              height: "50%",
              backgroundColor: "#fff",
              containLabel: false,
            },
            {
              left: "0",
              right: "14%",
              bottom: "14%",
              height: "15%",
              backgroundColor: "#fff",

              containLabel: false
            }
          ],

          xAxis: [
            {
              type: "category",
              data: data0.categoryData,
              scale: true,
              boundaryGap: false,
              splitLine: {show: false},
              offset: 120,
              axisLine: {  lineStyle: {       // 属性lineStyle
                  color: ['#ccc'],
                  width: 1,
                  type: 'solid'
                } },// 底部x轴颜色
              position: "bottom"
            },

            {
              type: "category",
              gridIndex: 1,
              data: data0.categoryData,
              scale: true,
              boundaryGap: false,
              axisLine: {onZero: false,
                lineStyle: { color: '#fff' } },
              axisTick: {show: false},
              splitLine: {show: false},
              axisLabel: {show: false},

              min: "dataMin",
              max: "dataMax",
              position: "bottom"
            }
          ],
          yAxis: [
            {
              position: "right",
              scale: true,
              splitArea: {
                show: false
              },
              axisLine: {
                show: true,lineStyle: { color: '#fff' } },// 底部x轴颜色
              splitLine: {show: false}

            },
            {
              position: "right",
              scale: true,
              axisLine: { lineStyle: { color: '#fff' } },// 底部x轴颜色
              gridIndex: 1,
              splitArea: {
                show: false
              },
              splitLine: {show: false}
            }
          ],
          dataZoom: [
            {
              type: "inside",
              xAxisIndex: [0, 1],
              start: this.dataZoom.start,
              end: this.dataZoom.end,

            }
          ],
          series: [
            {
              name: "K线",
              type: "candlestick",
              data: data0.values,
              itemStyle: {
                color: upColor,
                color0: downColor,
                borderColor: upBorderColor,
                borderColor0: downBorderColor
              }
            },
            {
              name: "MA5",
              type: "line",
              data: this.calculateMA(5, data0),
              smooth: true,
              showSymbol: false,
              lineStyle: {
                opacity: 0.7,
                color: '#1B4C41',
                normal: {
                  width: 1
                }
              }
            },
            {
              name: "MA10",
              type: "line",
              data: this.calculateMA(10, data0),
              smooth: true,
              showSymbol: false,
              lineStyle: {
                opacity: 0.7,
                color: '#5A135F',
                normal: {
                  width: 1
                }
              }
            },
            {
              name: "Volumn",
              type: "bar",
              xAxisIndex: 1,
              yAxisIndex: 1,
              data: data0.volumns,
              itemStyle: {
                normal: {
                  color: function (params) {
                    var colorList;
                    if (
                      data0.values[params.dataIndex][1] >
                      data0.values[params.dataIndex][0]
                    ) {
                      colorList = upColor;
                    } else {
                      colorList = downColor;
                    }
                    return colorList;
                  }
                }
              }
            }
          ]
        };

        //console.log(option);
        // this.myeChart.setOption(option);
        return option;
      },

      formatNumber(n) {
        n = n.toString();
        return n[1] ? n : "0" + n;
      },

      formatTime(number, format) {
        var formateArr = ["Y", "M", "D", "h", "m", "s"];
        var returnArr = [];

        var date = new Date(number * 1000);
        returnArr.push(date.getFullYear());
        returnArr.push(this.formatNumber(date.getMonth() + 1));
        returnArr.push(this.formatNumber(date.getDate()));

        returnArr.push(this.formatNumber(date.getHours()));
        returnArr.push(this.formatNumber(date.getMinutes()));
        returnArr.push(this.formatNumber(date.getSeconds()));

        for (var i in returnArr) {
          format = format.replace(formateArr[i], returnArr[i]);
        }
        return format;
      },

      ask(url, params, method) {
        let baseUrl = "https://www.qldlt.com/index/";
        let axios = this.axios;
        if (method == "get") {
          return axios.get(baseUrl + url, {params: params}).then(data => {
            return data.data;
          });
        } else if (method == "post") {
          return axios
            .post(baseUrl + url, params, {
              headers: {
                "content-type": "application/json"
              }
            })
            .then(data => {
              return data.data;
            });
        } else {
          console.log("请求方式有问题");
        }
      },

      zoomClick() {

        console.log("zoomClick")

        let direction = this.dataZoom.direction;
        if (1 == direction) {
          this.dataZoom.start = this.dataZoom.start + 3;
          this.dataZoom.end = this.dataZoom.end - 3;
          this.dataZoom.startValue = this.dataZoom.startValue + 2;
          this.dataZoom.endValue = this.dataZoom.endValue - 2;
        }

        this.myeChart.dispatchAction({
          type: "dataZoom",

          dataZoomIndex: 0,
          // 开始位置的百分比，0 - 100
          start: this.dataZoom.start,
          // 结束位置的百分比，0 - 100
          end: this.dataZoom.end,
          // 开始位置的数值
          startValue: this.dataZoom.startValue,
          // 结束位置的数值
          endValue: this.dataZoom.endValue
        });
      },
     // 确定下单
      buySell(buyType){
        var nowPrice=this.now;
        console.log(nowPrice);
        addOrder({
          order_type:buyType,
          order_shouyi:this.order_shouyi,
          order_pid:this.pid,
          newprice:nowPrice,
          order_sen:this.order_sen,
          order_price:this.order_price,
          uid:this.userInfo.uid
        }).then((data)=>{
          console.log(data);
           if (data.errorCode==0){
             this.IsShow=true;
             this.showModals=false;
             this.$refs.nowPrice.innerText=nowPrice;
             const TIME_COUNT=this.order_sen;
             if (!this.timers) {
               this.count = TIME_COUNT;
               this.timers = setInterval(() => {
                 if (this.count > 0 && this.count <= TIME_COUNT) {
                   this.count--;
                 } else {
                   clearInterval(this.timers);
                   this.timers= null;
                   orderInfo({
                     oid:data.data.oid,
                     order_rand:data.data.order_rand,
                     price:data.data.buyprice
                   }).then((datas)=>{
                     console.log(datas)
                     if (datas.errorCode==0){
                       this.isTime=false;
                       this.$refs.ploss.innerText=datas.data.ploss+'USD';
                     }
                   })
                 }
               }, 1000)

             }
           }else
             {
             MessageBox.alert(data.msg)
           }

        })
      },
      // 选择下单
      chose(buyType){
         // 选择订单
        this.isTime=true;
        console.log(this.order_sen);
        this.xdType=buyType;
        this.showModal=false;
        this.showModals=true;
       if (buyType==0){
         this.$refs.uord.innerText='up';
         this.$refs.downTop.style.background='#12B092';
       } else {
         this.$refs.uord.innerText='down';
         this.$refs.downTop.style.background='#E82C5F';
       }


      },
      // 再来一单
      again(){
        clearInterval(this.timers);
        this.timers= null;
        this.IsShow=false;
        this.showModal=true;
      },
      // 关闭弹窗
      closeDetail(colseType){
        if (colseType==1){
          this.showModals=false
        }else {
          this.IsShow=false
        }
      }
    },
    watch:{
      order_sen(newVal){
        if (newVal==60){
          this.order_shouyi=95;
        }else if (newVal==180){
          this.order_shouyi=100;
        }else {
          this.order_shouyi=105;
        }
        this.order_sen=newVal;

      },
      now(newVal,oldVal){
        if (Number(newVal)>Number(oldVal)){
          this.$refs.colorPrice.style.color="#4BAC92"
        }else {
          this.$refs.colorPrice.style.color="#D04B63"
        }

      }

    }



  };
</script>
<style scoped>
  .mint-header {
    color: #fff !important;
    background: #131E31 !important;
  }
  .mask {
    background-color: #000;
    opacity: 0.3;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1
  }

  .pop {
    background-color: #fff;
    position: fixed;
    top: 60%;
    bottom: 0;
    width: 100%;
    height: 44%;
    z-index: 2
  }

  .box {
    margin: 8px;
  }
  .box3 {
    margin: 8px;
  }
  .box3 span{
   font-size: 18px;
    margin-left: 4px;
  }

  .RadioStyle {
    margin-left: 10px;
  }

  .RadioStyle input {
    display: none;
  }

  .RadioStyle label {
    border: 1px solid #DD94AF ;
    padding: 2px 10px 2px 10px;
    line-height: 32px;
    text-align: center;
    margin: 8px;
    border-radius: 4px
  }

  .RadioStyle input:checked + label {
    background: url(../../assets/ico_checkon.svg) no-repeat right bottom;
    background-size: 21px 21px;
    color: #00a4ff
  }

  .btn {
    background-color: #fff;
    border-radius: 4px;
    border: 1px solid blue;
    padding: 4px 12px;
  }

  .enlarge img {
    display: inline-block;
    width: 16px;
    height: 15px;
    position: relative;
    left: 22px;
    top: 16px;
  }

  /deep/ .van-tabs__wrap--scrollable .van-tab {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 0%;
    flex: 1 0 0% !important;
    font-size: 12px !important;
    background: #131E31 !important;
    color: #4681f5;

  }

  .kine {
    border-top: 1px solid black;
  }

  .content {
    display: flex;
    flex-direction: row;
    width: 100%;
    height: 74px;
    background: #131E31;
    color: #fff;
    border-top: 2px solid #dddddd;
    border-bottom: 2px solid #dddddd;
  }

  .content-left {
    display: flex;
    flex-direction: column;
    color: #4BAC92;
    width: 60%;
  }

  .content-left div:nth-child(1) {
    margin-left: 12px;
    font-size: 18px;
    font-weight: bold;
    margin-top: 4px;
  }

  .content-left div:nth-child(2) {
    margin-left: 12px;
    font-size: 12px;

  }


  .content-center {
    display: flex;
    flex-direction: column;
    width: 16%;
    font-size: 11px;
    text-align: left;
    font-weight: bold;
    color: #dddddd;
  }

  .content-center div {
    margin-top: 4px;
  }

  .content-right {
    display: flex;
    flex-direction: column;
    color: #ffffff;
    width: 24%;
  }

  .trading {
    display: flex;
    position: fixed;
    flex-direction: row;
    bottom: 0;
    width: 100%;
    margin-top: -16px;
    border-top: 2px solid #dddddd;
    background: #131E31;
  }

  .trading-left {
    border: 1px solid #dddddd;
    display: flex;
    flex-direction: row;
    width: 50%;
    height: 42px;
    margin-left: 12px;
    margin-top:2%;
    background: #ffffff;
  }

  .trading-left .trading-number {
    display: flex;
    flex-direction: column;
    text-align: center;
    width: 44px;
  }

  .trading-left .trading-number div:nth-child(2) {
    color: #2a62cc;

    font-size: 12px;
  }

  .trading-left .trading-number div:nth-child(1) {
    font-size: 12px;
    margin-top: 2px;
  }

  .trading-img {
    margin-left: 20px;
    margin-top: 10px;
  }
  .trading-img img{
    width: 12px;
    height: 12px;
  }

  .trading-bottom {
    display: flex;
    flex-direction: row;
    position: fixed;
    bottom: 10px;
    width: 100%;
    justify-content: center;
    align-items: center;
    text-align: center;
  }
  .trading-bottom div p {
    margin-top: 8px;
    letter-spacing: 6px;
  }

  .trading-bottom div:nth-child(1) {
    width: 48%;
    height: 32px;
    background: #12B092;
    color: #fff;
    border-radius: 6px;
  }

  .trading-bottom div:nth-child(2) {
    width: 48%;
    margin-left: 4%;
    height: 32px;
    background:  #E82C5F ;
    color: #fff;
    border-radius: 6px;
  }

  .trading-right {
    display: flex;
    flex-direction: row;
    width: 50%;
    height: 44px;
    justify-content: center;
    align-items: center;
    margin-top: 2%;
    text-align: center;
  }

  .trading-right div p {
    letter-spacing: 1.5px;
    margin-top: 10px;
  }

  .trading-right div:nth-child(1) {
    width: 40%;
    height: 40px;
    background: #12B092  ;
    color: #fff;
    border-radius: 5px;
  }

  .trading-right div:nth-child(2) {
    width: 40%;
    margin-left: 6%;
    height: 40px;
    background:  #E82C5F ;
    border-radius: 5px;
    color: #fff;
  }

  .down{
    background: #FFFFFF;
    z-index: 100;
    display: flex;
    color: black;
    flex-direction: column;
    align-items: center;
    width:82%;
    height: 210px;
    position: fixed;
    bottom: 30px;
    left: 27px;
  }
  .downTop{
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 30px;
    background:  #E82C5F ;
    align-items: center;
    line-height: 30px;
    font-size: 15px;
    color: #FFFFFF;
  }
  .qx{
    width: 120px;
    height: 36px;
    background: #ddd;
    font-size: 18px;
    line-height: 40px;
    color: #ccc;
    border-radius: 5px;
    border: none;
    padding-left: 10px;

  }
  .md{
    border-radius: 5px;
    width: 120px;
    height: 36px;
    background:  #E82C5F ;
    font-size: 18px;
    line-height: 40px;
    color: #FFFFFF;
    border: none;
  }
  .mz{
    border-radius: 5px;
    width: 120px;
    height: 36px;
    background: #12B092;
    font-size: 18px;
    line-height: 40px;
    color: #FFFFFF;
    border: none;
  }
  .smallBox{
    display: flex;
    flex-direction: column;
    align-items: center;

  }
</style>
